<template>
    <div style="width: 1000px;height: 600px;" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let data = [
        { value: 1048, name: 'legend1' },
        { value: 1048, name: 'legend2' },
        { value: 1048, name: 'legend3' },
        { value: 1048, name: 'legend4' },
        { value: 1048, name: 'legend5' },
    ]
    let colors = ['#5470c6', '#fedb5f', '#73c0de', '#fc8452', '#ea7ccc']
    data.map((item, k) => {
        item['itemStyle'] = { color: colors[k] }
    })
    const computedDataGap = (dataParam) => {
        let newData = [];
        let gapItem = {
            value: 20, name: null,
            itemStyle: {
                opacity: 0
            },
            tooltip: {  //隐藏这个的鼠标悬浮
                show: false,
            },
        }
        let showLen = dataParam.filter((v) => v.value && v.value > 0);
        if (showLen.length <= 1) {
            return dataParam;
        }
        dataParam.map((v) => {
            newData.push(v)
            if (v.value) {
                newData.push(gapItem)
            }
        })
        return newData;
    }
    let n = computedDataGap(data);

    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            data: ['legend1', 'legend2', 'legend3', 'legend4', 'legend5']
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['66%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 1000,
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: n
            }
        ]
    };

    myChart.on('legendselectchanged', function (lparam) {
        let selects = lparam.selected;
        let newDataFilter = [];
        data.filter((item) => {
            if (selects[item.name]) {
                newDataFilter.push(item);
            } else {
                let clone = {
                    ...item,
                    value: 0
                }
                newDataFilter.push(clone)
            }
        })
        console.log(newDataFilter);
        let nn = computedDataGap(newDataFilter);
        myChart.setOption({
            series: [
                {
                    data: nn
                }
            ]
        })
        console.log(lparam)
    })
    myChart.setOption(option)
})
</script>